import React from 'react';
import PropTypes from 'prop-types';
import { Button } from '@teamix/ui';
import { YunxiaoIcon } from '@alife/devops-ui';
import ResultTable from '../components/table';
import intl from '../../../../locale';

const prefix = 'upgrade-step3-table-section';
export default class ProgressTable extends React.PureComponent {
  static propTypes = {
    onPageChange: PropTypes.func,
  };

  static defaultProps = {
    onPageChange: () => {},
  };

  constructor(props) {
    super(props);
    const { dataType } = props;
    this.state = {
      isTableShow: dataType === 'fail',
    };
  }

  render() {
    const { isTableShow } = this.state;
    const { lastUpgradeLoaded, tablePagination, dataType } = this.props;
    const { total } = tablePagination;
    return (
      <div className={`${prefix}`}>
        <div className={`${prefix}-title`}>
          <Button
            type="normal"
            text
            color="gray"
            onClick={() => {
              this.setState({ isTableShow: !isTableShow });
            }}
          >
            <YunxiaoIcon
              type={isTableShow ? 'trilateral-down-fill' : 'trilateral-right-fill'}
              style={{ marginRight: 8 }}
            />
            <span className={`${prefix}-title-text`}>
              {dataType === 'fail'
                ? intl.get({
                    id: 'code-assets.containers.progress.table.UpgradeFailed',
                    defaultMessage: '升级失败',
                  })
                : intl.get({
                    id: 'code-assets.containers.progress.table.UpgradeSucceeded',
                    defaultMessage: '升级成功',
                  })}
              {lastUpgradeLoaded && total ? ` · ${total}` : ''}
            </span>
          </Button>
        </div>
        <div style={{ display: isTableShow ? 'block' : 'none' }}>
          <ResultTable {...this.props} />
        </div>
      </div>
    );
  }
}
